<template>
  <div>
    <van-tabs @disabled="onDisabled" @click="onClick" v-model="activeTab" color="#007AFF">
      <van-tab title="收益金额"><earn></earn></van-tab>
      <van-tab title="签约收款" :badge="signCount" :disabled="!islogin"><sign></sign></van-tab>
      <van-tab title="当前任务" :disabled="!islogin"><task></task></van-tab>
    </van-tabs>
  </div>
</template>

<script>
import earn from '@/view/tab/tabEarnings'
import sign from '@/view/tab/tabSign'
import task from '@/view/tab/tabTask'

import { Dialog } from 'vant'

export default {
  components: {
    earn,
    sign,
    task
  },
  data () {
    return {
      signCount: '',
      brandName: JSON.parse(localStorage.getItem('BRANDMSG')).brand.brandName,
      islogin: localStorage.getItem('TOKEN'),
      activeTab: parseInt(localStorage.getItem('ACTIVETAB'))
    }
  },
  created () {
    // 首页要显示oem名字
    document.title = this.brandName
    console.log(this.$route)
    const signCount = localStorage.getItem('SIGNCOUNT')
    if (signCount > 0) {
      this.signCount = signCount
    }
  },
  methods: {
    onDisabled (name, title) {
      Dialog.confirm({
        title: '提示',
        message: '您还未登录不能收款',
        confirmButtonText: '去登录',
        cancelButtonText: '取消'
      }).then(() => {
        // on confirm
        this.$router.push({ name: 'login' })
      }).catch(() => {
      // on cancel
      })
    },
    onClick (name, title) {
      localStorage.setItem('ACTIVETAB', name)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
